<template>
  <el-row :gutter="0" style="display: flex;align-items: center;margin-left: 1%;">
    <span style="font-weight: bold;color: #606266; margin-right: 10px;">账号</span>
    <el-input size="large" v-model="condition.userName" style="width: 240px" placeholder="请输入账号" />
    <span style="font-weight: bold;color: #606266; margin-right: 10px;">昵称</span>
    <el-input size="large" v-model="condition.nickName" style="width: 240px" placeholder="请输入昵称" />
    <span style="font-weight: bold;color: #606266; margin-right: 10px;">电话</span>
    <el-input size="large" v-model="condition.phone" style="width: 240px" placeholder="请输入电话" />
    <span style="font-weight: bold;color: #606266; margin-right: 10px;">邮件</span>
    <el-input size="large" v-model="condition.email" style="width: 240px" placeholder="请输入邮件" />
    <span style="font-weight: bold;color: #606266; margin-right: 10px;">积分</span>
    <el-input size="large" v-model="condition.point" style="width: 240px" placeholder="请输入积分" />
    <span style="font-weight: bold;color: #606266; margin-right: 10px;">姓名</span>
    <el-input size="large" v-model="condition.name" style="width: 240px" placeholder="请输入姓名" />
    <span style="font-weight: bold;color: #606266; margin-right: 10px;">地址</span>
    <el-input size="large" v-model="condition.address" style="width: 240px" placeholder="请输入地址" />
  </el-row>
  <el-row style="margin-top: 20px;" justify="space-between">
    <el-col :span="10">
      <el-button type="primary" style="margin: 0 15px;" @click="search">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </el-button>
      <el-button type="primary" style="margin: 0 15px;" @click="toadd">
        <el-icon>
          <Plus />
        </el-icon>
        新增
      </el-button>
    </el-col>
  </el-row>
  <el-row style="padding-top: 20px;">
    <UserManagementTable :user="user" @delete="deleteid" @edit="toedit" />
    <el-pagination
      v-model:current-page="condition.pagenum"
      v-model:page-size="condition.pagesize"
      :page-sizes="[10,20,30,40,50]"
      size="large"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totle"
     
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-row>
  <el-dialog :title="title" width="600px" v-model="visible" @close="onClose">
    <!-- 表单 -->
    <el-form :model="userdata">
      <el-form-item label="编号" prop="id" v-if="title == '编辑' ? true : false">
        <el-input placeholder="请填写id" :maxLength="20" v-model="userdata.id"></el-input>
      </el-form-item>
      <el-form-item label="账户" prop="userName">
        <el-input placeholder="请填写账户" v-model="userdata.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input placeholder="请填写密码" v-model="userdata.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input placeholder="请填写昵称" v-model="userdata.nickName"></el-input>
      </el-form-item>
      <el-form-item label="邮件" prop="email">
        <el-input placeholder="请填写邮件" v-model="userdata.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input placeholder="请填写手机" v-model="userdata.phone"></el-input>
      </el-form-item>
      <el-form-item label="积分" prop="point">
        <el-input placeholder="请填写积分" v-model="userdata.point"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input placeholder="请填写姓名" v-model="userdata.name"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input placeholder="请填写地址" v-model="userdata.address"></el-input>
      </el-form-item>
    </el-form>
    <!-- 表单 -->

    <template #footer>
      <div class="dialog-footer">
        <el-button size="default" @click="onClose">取 消</el-button>
        <el-button size="default" type="primary" @click="handleOk">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import UserManagementTable from '@/components/UserManagementTable/UserManagementTable.vue';
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
// 分页
function handleSizeChange(val) {
  star()
}
function handleCurrentChange(val) {
  star()
}
let totle = ref(0)
// 定义数据对象
let user = ref([])
// 定义条件对象
let condition = reactive({
  pagenum: 1,
  pagesize: 10,
  id: 0,
  userName: '',
  password: '',
  nickName: '',
  email: '',
  phone: '',
  point:0,
  name:'',
address:''
})
// 初始化加载数据
onMounted(()=>{
star()
})
function star(){
  return axios.post('/user/selectAll', condition).then(res => {
  console.log("初始数据", res.data.data)
  user.value = res.data.data.list;
  totle.value=res.data.data.total
}).catch(err => {
  alert(err.data)
})

}

// 接收删除参数
function deleteid(id) {
  console.log('id', id);
  axios.post('/user/delete', { did:id, ...condition }).then(res => {
    console.log('res.data.data', res.data.data);
    if (res.data.code==2) {
      alert(res.data.msg)
    } else {
      user.value = res.data.data.list
      totle.value=res.data.data.total
    }
  }).catch(err => {
    alert(err)
  })
}
// 查询
function search() {
  axios.post('/user/selectAll', condition).then(res => {
    console.log('res.data.data', res.data.data);
    if (res.data.code==2) {
      alert(res.data.msg)
    } else {
      user.value = res.data.data.list
      totle.value=res.data.data.total
    }
  }).catch(err => {
    alert(err)
  })
}
// 弹窗数据
let visible = ref(false)
let title = ref('')
let userdata = reactive({
  id: 0,
  userName: '',
  password: '',
  nickName: '',
  email: '',
  phone: '',
  point:0,
  name:'',
address:''
})


function toedit(row) {
  visible.value = true
  title.value = '编辑'
  userdata = reactive(row)
  userdata.password = ''

}
function toadd() {
  visible.value = true
  title.value = '添加'
}
async function handleOk() {
  if (title.value == '添加') {
    let aa = () => {
      let sys = JSON.stringify(userdata)
      return axios.post('/user/insert', {User: sys, ...condition }).then(res => {
        if (res.data.code==2) {
          alert(res.data.msg)
        } else {
          user.value = res.data.data.list
          totle.value=res.data.data.total
        }
      }).catch(err => {
        alert(err)
      })
    }
    await aa();
  }
  if (title.value == '编辑') {
    let bb = () => {
      let sys = JSON.stringify(userdata)
      return axios.post('/user/update', {User: sys, ...condition }).then(res => {

        if (res.data.code==2) {
          alert(res.data.msg)
        } else {
          user.value = res.data.data.list
          totle.value=res.data.data.total
        }
      }).catch(err => {
        alert(err)
      })
    }
    await bb()
  }
  userdata = reactive({
  id: 0,
  userName: '',
  password: '',
  nickName: '',
  email: '',
  phone: '',
  point:0,
  name:'',
address:''
})

  visible.value = false
}
function onClose() {
  visible.value = false
  userdata = reactive({
  id: 0,
  userName: '',
  password: '',
  nickName: '',
  email: '',
  phone: '',
  point:0,
  name:'',
address:''
})
}

</script>